<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		    <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>我的画板</title>
		<link rel="stylesheet" href="css/progressJS.css" />
		<style>
			#cavs {
				border: 1px solid #e9e9e9;
				border-radius: 10px 10px 10px 10px;
				box-shadow: 10px 10px 5px #FFF;
				background-color: #ffffff;
			}

			#ToolBar {
				display: flex;
				overflow-x: scroll;
				overflow-y: hidden;
				height: 134px;
				bottom: 0;
				z-index: 2;
				background: #abaeba66;
				width: 96%;
				border-radius: 33px 33px 0px 0px;
				margin-left: 1.5%;
				text-align: center;
			}

			img {
				margin-top: 24px;
				/* -webkit-transform: rotate(
					 329deg
					 ); */
				margin-left: -7px;
			}

			.pen:hover {
				color: yellow;
				transform: scale(1.1);
				-ms-transform: rotate(1.1);
				/* IE 9 */
				-moz-transform: rotate(1.1);
				/* Firefox */
				-webkit-transform: rotate(1.1);
				/* Safari 和 Chrome */
				-o-transform: rotate(1.1);
				/* Opera */
			}

			.progress {
				margin: 0 20px;
				height: 200px;
				position: absolute;
				right: 20px;
				bottom: 165px;
			}

			.zbtn {
				margin: 0 20px;
				    height: 30px;
				    position: absolute;
				    right: 20px;
				    bottom: 385px;
			}
			.zbtn img{
				margin-top: 0px;
			}
			
			.eeaser {
				margin: 0 20px;
				    height: 30px;
				    position: absolute;
				    right: 20px;
				    bottom: 437px;
			}
			.eeaser img{
				margin-top: 0px;
			}

			.container {
				width: 18%;
				position: fixed;
				left: 15px;
				top: 5px;
				overflow-y: scroll;
			}

			.pic {
				width: 98%;
				background-image: url(image/包图网_19407964手绘可爱动物兔子边框元素.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				height: 176px;
			}

			.pic img {
				margin-left: 12px;
				margin-top: 43px;
				width: 88%;
				height: 124px;
			}

			.div_1 {
				width: 80%;
				float: right;
			}

			/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
			::-webkit-scrollbar {
				width: 7px;
				height: 7px;
				background-color: #F5F5F5;
			}

			/*定义滚动条轨道 内阴影+圆角*/
			::-webkit-scrollbar-track {
				box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
				-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
				border-radius: 10px;
				background-color: #F5F5F5;
			}

			/*定义滑块 内阴影+圆角*/
			::-webkit-scrollbar-thumb {
				border-radius: 10px;
				box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
				-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
				background-color: #c8c8c8;
			}
		</style>
	</head>
	<body>
		<!-- <div id="btn" onclick="daoru()">滑动屏幕试试看</div> -->
		<div class="container">
			<div class="pic Importpng" data="Importpng">
				<img width="200px" src="image/1.jpeg" />
			</div>
			<div class="pic Importpng" data="Importpng">
				<img width="200px" src="image/2.png" />
			</div>
			<div class="pic Importpng" data="Importpng">
				<img width="200px" src="image/3.jpeg" />
			</div>
			<div class="pic Importpng" data="Importpng">
				<img width="200px" src="image/4.jpeg" />
			</div>
		</div>
		<div class="div_1">
			<canvas id="cavs"></canvas>
			<div id="ToolBar">
				<div class="pen" data="pen"><img style="margin-left: 0px;" height="100px" src="img/1.png"></div>
				<div class="pen" data="pen"><img height="100px" src="img/2.png"></div>
				<div class="pen" data="pen"><img height="100px" src="img/3.png"></div>
				<div class="pen" data="pen"><img height="100px" src="img/4.png"></div>
				<div class="pen" data="pen"><img height="100px" src="img/5.png"></div>
				<div class="pen" data="pen"><img height="100px" src="img/6.png"></div>
				<div class="pen" data="pen"><img height="100px" src="img/7.png"></div>
				<div class="pen" data="pen"><img height="100px" src="img/8.png"></div>
				<div class="pen" data="pen"><img height="100px" src="img/9.png"></div>
				<div class="pen" data="pen"><img height="100px" src="img/10.png"></div>
				<div class="pen" data="pen"><img height="100px" src="img/11.png"></div>
				<div class="pen" data="pen"><img height="100px" src="img/12.png"></div>
				<div class="pen" data="pen"><img height="100px" src="img/13.png"></div>
				<div class="pen" data="pen"><img height="100px" src="img/14.png"></div>
				<div class="pen" data="pen"><img height="100px" src="img/15.png"></div>
				<div class="pen" data="pen"><img height="100px" src="img/16.png"></div>
				<div class="pen" data="pen"><img height="100px" src="img/17.png"></div>
				<div class="pen" data="pen"><img height="100px" src="img/18.png"></div>
				<div class="pen" data="pen"><img height="100px" src="img/19.png"></div>
				<div class="pen" data="pen"><img height="100px" src="img/20.png"></div>
				<div class="pen" data="pen"><img height="100px" src="img/21.png"></div>
				<div class="pen" data="pen"><img height="100px" src="img/22.png"></div>
				<div class="pen" data="pen"><img height="100px" src="img/23.png"></div>
				<div class="pen" data="pen"><img height="100px" src="img/24.png"></div>
			</div>
		</div>
		<div class="eeaser"><img src="image/eraser.png" width="30px"></div>
		<div class="zbtn"><img src="image/z.png" width="30px"></div>
		<div class="progress"></div>

	</body>
	<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<script src="js/progressJS.js"></script>
	<script>
		console.log($(window).height() - 120)
		var c = document.getElementById("cavs");
		$(".container").css("height", $(window).height() + "px")
		function clearCanvas() {
			c.height = $(window).height() - 140;
			c.width = $(window).width() * 0.8 - 10;
			console.log($(window).width())
		}
		
		$('body').css({
		    cursor:"url(image/axcng-0albt-001.ico),default"
		})
		
		
		window.addEventListener('mousewheel', function(event){
		if (event.ctrlKey === true || event.metaKey) {
		event.preventDefault();
		}
		},{ passive: false});
		//firefox
		window.addEventListener('DOMMouseScroll', function(event){
		if (event.ctrlKey === true || event.metaKey) {
		event.preventDefault();
		}
		},{ passive: false});
		
		
		$(".Importpng").click(function() {
			arr = [];
			ctx.clearRect(0, 0, $(window).width() * 0.8 - 10, $(window).height() - 140);
			var imgurl = $(this).find('img').attr('src');
			var img = new Image()
			img.crossOrigin = '*'
			img.src = imgurl;
			if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
				ctx.drawImage(img, 0, 0, $(window).width() * 0.8 - 10, $(window).height() - 140);
				arr.push(ctx.getImageData(0, 0, $(window).width() * 0.8 - 10, $(window).height() - 140));
				return; // 直接返回，不用再处理onload事件
			}
			img.onload = function() {
				ctx.drawImage(img, 0, 0, $(window).width() * 0.8 - 10, $(window).height() - 140);
				arr.push(ctx.getImageData(0, 0, $(window).width() * 0.8 - 10, $(window).height() - 140));
			};

		})

		//粗细
		var step = new Progress('.progress', {
			val: 1,
			size: 20,
			precision: 2,
			direction: 'vertical', //方向 默认水平 vertical 垂直
			tip: {
				trigger: 'hover',
				align: 'left'
			},
			//loading: true,
			getVal: function(el) {
				linewidth = el.val
				if(linewidth==0){
					step.updateVal(1)
				}
			}
		})

		//撤销

		$(".zbtn").click(function() {
			arr.pop();
			ctx.clearRect(0, 0, $(window).width() * 0.8 - 10, $(window).height() - 140);
			if (arr.length > 0) {
				ctx.putImageData(arr[arr.length - 1], 0, 0, 0, 0, $(window).width() * 0.8 - 10, $(window).height() - 140);
			}
		})
		
		$(".eeaser").click(function(){
			type = "eeaser"
			step.updateVal(10)
			linewidth = 10
			$('body').css({
			    cursor:"url(image/aqsqn-jxrs6-001.ico),default"
			})
		
		})

		//点击铅笔
		$(".pen").click(function() {
			type = "pen"
			$('body').css({
			    cursor:"url(image/axcng-0albt-001.ico),default"
			})
			var index = $(this).index();
			switch (index) {
				case 0:
					myColor = "#56CAF3"
					step.updateVal(10)
					linewidth = 1
					break;
				case 1:
					myColor = "#4291F0"
					step.updateVal(1)
					linewidth = 1
					break;
				case 2:
					myColor = "#0C7FD8"
					step.updateVal(1)
					linewidth = 1
					break;
				case 3:
					myColor = "#123C3A"
					step.updateVal(1)
					linewidth = 1
					break;
				case 4:
					myColor = "#3B42B4"
					step.updateVal(1)
					linewidth = 1
					break;
				case 5:
					myColor = "#000"
					step.updateVal(1)
					linewidth = 1
					break;
				case 6:
					myColor = "#526375"
					step.updateVal(1)
					linewidth = 1
					break;
				case 7:
					myColor = "#7E271E"
					step.updateVal(1)
					linewidth = 1
					break;
				case 8:
					myColor = "#BB5503"
					step.updateVal(1)
					linewidth = 1
					break;
				case 9:
					myColor = "#9C7C2F"
					step.updateVal(1)
					linewidth = 1
					break;
				case 10:
					myColor = "#34C832"
					step.updateVal(1)
					linewidth = 1
					break;
				case 11:
					myColor = "#05BE58"
					step.updateVal(1)
					linewidth = 1
					break;
				case 12:
					myColor = "#DF1700"
					step.updateVal(1)
					linewidth = 1
					break;
				case 13:
					myColor = "#FE77D3"
					step.updateVal(1)
					linewidth = 1
					break;
				case 14:
					myColor = "#FF6AAE"
					step.updateVal(1)
					linewidth = 1
					break;
				case 15:
					myColor = "#E82F94"
					step.updateVal(1)
					linewidth = 1
					break;
				case 16:
					myColor = "#B6462E"
					step.updateVal(1)
					linewidth = 1
					break;
				case 17:
					myColor = "#2E2C77"
					step.updateVal(1)
					linewidth = 1
					break;
				case 18:
					myColor = "#ACCD34"
					step.updateVal(1)
					linewidth = 1
					break;
				case 19:
					myColor = "#EFCC34"
					step.updateVal(1)
					linewidth = 1
					break;
				case 20:
					myColor = "#E7F059"
					step.updateVal(1)
					linewidth = 1
					break;
				case 21:
					myColor = "#FEAB2B"
					step.updateVal(1)
					linewidth = 1
					break;
				case 22:
					myColor = "#FF8814"
					step.updateVal(1)
					linewidth = 1
					break;
				case 23:
					myColor = "#FA6813"
					step.updateVal(1)
					linewidth = 1
					break;
				default:
			}
		});
	</script>
	<script>
		let canvas = document.getElementById('cavs');
		let ctx = canvas.getContext('2d');
		let vertex = canvas.getBoundingClientRect();
		let myColor = "#000"
		let linewidth = 1
		let move = true;
		var arr = [];
		var type = "pen"
		// 设置线条的样式
		// ctx.lineWidth = 100

		// PC浏览器事件
		canvas.onmousedown = function() {
			canvas.addEventListener('mousemove', handler, true);
		}
		canvas.onmouseup = function() {
			arr.push(ctx.getImageData(0, 0, $(window).width() * 0.8 - 10, $(window).height() - 140));
			move = true;
			canvas.removeEventListener("mousemove", handler, true);
		}


		/* 手机浏览器事件 */
		canvas.addEventListener('touchstart', function() {
			canvas.addEventListener('touchmove', touchHandler, true);
		}, false)
		document.addEventListener('touchend', function() {
			move = true;
			canvas.removeEventListener("touchmove", touchHandler, true);
		}, false)
		// 手机浏览器touch事件
		function touchHandler(event) {
			if (event.targetTouches.length == 1) {
				event.preventDefault(); // 阻止浏览器默认事件，重要
				var touch = event.targetTouches[0];
				let path = {
					"x": touch.clientX - vertex.left,
					"y": touch.clientY - vertex.top,
					"color": myColor,
					'move': move,
					'lineWidth': linewidth
				};
				move = false;
				drawing(path);
			}
		}
		/* 手机浏览器 */
		function handler(e) {
			let path = {
				"x": e.clientX - vertex.left,
				"y": e.clientY - vertex.top,
				"color": myColor,
				'move': move,
				'lineWidth': linewidth
			};
			move = false;

			drawing(path);
		}

		canvas.addEventListener('touchend', function() {
			arr.push(ctx.getImageData(0, 0, $(window).width() * 0.8 - 10, $(window).height() - 140));
		})

		// 绘画操作
		function drawing(path) {
			if(type=="pen"){
				if (path.move) {
					ctx.beginPath();
					ctx.moveTo(path.x, path.y);
				}
				ctx.lineTo(path.x, path.y);
				ctx.strokeStyle = path.color;
				ctx.lineWidth = path.lineWidth;
				ctx.lineCap = "round";
				ctx.lineJoin = 'round';
				ctx.stroke();
			}else if(type=="eeaser"){
				debugger
				ctx.clearRect(path.x - 5, path.y - 5, path.lineWidth, path.lineWidth);
			}
		}
		// 前置补0
		function PrefixInteger(num, n) {
			return (Array(n).join(0) + num).slice(-n);
		}
		clearCanvas()
	</script>
</html>
